<template>
  <div class="header">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-sub-menu index="2">
        <template #title>视图示例</template>
        <el-menu-item index="/testday1">示例一（二三维地图维联动）</el-menu-item>
        <el-menu-item index="/testday2">示例二（3D地图切换天气）</el-menu-item>
        <el-menu-item index="/testday3">示例三(显示鼠标位置坐标)</el-menu-item>
        <el-menu-item index="/testday4">示例四(输入参数跳转坐标)</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
let activeIndex = ref("");

if (localStorage.getItem("menuItem")) {
  // 刷新保持菜单选中效果
  activeIndex.value = ref(localStorage.getItem("menuItem"));
} else {
  activeIndex.value = ref("/");
}

// 路由跳转
const handleSelect = (key, keyPath) => {
  localStorage.setItem("menuItem", key);
  router.push(key);
};
</script>

<style scoped>
.header {
  height: 40px;
  width: 100%;
  background-color: aqua;
}
/deep/ .el-menu--horizontal {
  height: 40px;
}
</style>
